<%@include file="common/head.jspf" %>

<div id="main" role="main">
    <div id="title-bar">
        <ul id="breadcrumbs">
            <li>
                <a href="dashboard.jsp" title="Home">
                    <span id="bc-home"></span>
                </a>
            </li>
            <li ><a href="grafico.jsp">Gr&aacute;ficos</a></li>
            <li class="no-hover">Plazos Finalizaci&oacute;n Procesos</li>
        </ul>
    </div>
    <div class="shadow-bottom shadow-titlebar"></div>
    <div id="main-content">
        <div class="container_12">
            <div class="grid_6">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Reporte de Plazos</h1>
                        <span></span>
                    </div>
                    <div class="block-content">
                        <div id="containerChart" style="overflow: auto"></div>
                    </div>
                </div>
            </div>
            <div class="grid_6">
                <div class="block-border">
                    <div class="block-header">
                        <h1>Expedientes resueltos por usuario</h1>
                        <span></span>
                    </div>
                    <div class="block-content">
                        <div id="containerChart2" style="overflow: auto"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="common/bottom.jspf" %>
<script src="js/highcharts.js"></script>
<script src="js/highcharts-more.js"></script>
<script src="js/modules/exporting.js"></script>

<script type="text/javascript">
    $(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'containerChart2',
                    zoomType: 'xy'
                },
                title: {
                    text: ''
                },
                xAxis: [{
                        categories: ['Federico Salazar', 'Randall Obando', 'Ana Cristina Ramirez', 'Grace Vargas', 'Mario Rodriguez']
                    }],
                yAxis: [{ // Primary yAxis
                        
                        title: {
                            text: 'Cantidad de Expedientes',
                            style: {
                                color: '#89A54E'
                            }
                        }
                    }, { // Secondary yAxis
                        title: {
                            text: 'Millones',
                            style: {
                                color: '#4572A7'
                            }
                        },
                        opposite: true
                    }],
                tooltip: {
                    formatter: function() {
                        if (this.series.name.indexOf("Monto") != -1){
                            return ''+
                                this.x +', '+ this.y +' millones';
                        }else{
                            return ''+
                                this.x +': '+ this.y ;
                        }
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                        }
                    }
                },
                series: [{
                        name: 'Ganados',
                        type: 'column',
                        data: [20, 17, 16, 129, 144]

                    },{
                        name: 'Perdidos',
                        type: 'column',
                        data: [29, 7, 10, 29, 14]

                    }, {
                        name: 'Promedio',
                        type: 'spline',
                        data: [80,80,80,80,80]
                    },{
                        name: 'Monto Demandas',
                        marker: {
                            symbol: 'square'
                        },
                        type:"scatter",
                        yAxis: 1,
                        data: [{
                                y:180000,
                                marker: {
                                    symbol: 'url(images/dollar.png)'
                                }
                            }, {
                                y:5500000,
                                marker: {
                                    symbol: 'url(images/dollar.png)'
                                }
                            }, {
                                y: 7500000,
                                marker: {
                                    symbol: 'url(images/dollar.png)'
                                }
                            },{
                                y: 9500000,
                                marker: {
                                    symbol: 'url(images/dollar.png)'
                                }
                            }, {
                                y: 6500000,
                                marker: {
                                    symbol: 'url(images/dollar.png)'
                                }
                            }]

                    }]
            });
        });

    });
</script>

<script type="text/javascript">
    $(function () {

        var chart = new Highcharts.Chart({

            chart: {
                renderTo: 'containerChart',
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: 'Expedientes resueltos en el periodo'
            },

            pane: {
                startAngle: -90,
                endAngle: 90,
                background: [{
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#FFF'],
                                [1, '#333']
                            ]
                        },
                        borderWidth: 0,
                        outerRadius: '109%'
                    }, {
                        backgroundColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            stops: [
                                [0, '#333'],
                                [1, '#FFF']
                            ]
                        },
                        borderWidth: 1,
                        outerRadius: '107%'
                    }, {
                        // default background
                    }, {
                        backgroundColor: '#DDD',
                        borderWidth: 0,
                        outerRadius: '105%',
                        innerRadius: '103%'
                    }]
            },

            // the value axis
            yAxis: {
                min: 0,
                max: 240,

                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',

                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: '<br/><br/><br/>Numeros Expedientes'
                },
                plotBands: [{
                        from: 0,
                        to: 100,
                        color: '#DF5353' // green
                    }, {
                        from: 100,
                        to: 160,
                        color: '#DDDF0D' // yellow
                    }, {
                        from: 160,
                        to: 240,
                        color:  '#55BF3B'// red
                    }]
            },

            series: [{
                    name: 'Numero de expedientes',
                    data: [80]
                }]

        });
    });
</script>
<script>
    var selected = "Ind";
    var subSelected = "Ind3";
</script>